<template>
	<view class="mylower">
		<view class="hideView" v-show="currentLevel==3"></view> <!-- 本元素用作去掉导航栏按钮 -->
		<noData v-if="lowerList.length==0"></noData>
		<scroll-view v-else class="list_inc" scroll-y="true" @scrolltolower="getUserlist()">
			<view class="list" v-for="item in lowerList" @click="aiddetail(item.aid)">
				<view class="listLeft">
					<image :src="item.photo"></image>
					<view>
						<view class="listName">{{item.realname}}</view>
						<view class="listAid">AID: {{item.aid}}</view>
					</view>
				</view>
				<view class="listTag" :class="{listTag_dls:!item.is_agency}">{{item.is_agency?'业务员':'代理商'}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { userlist,useridentity } from '../../api/index.js'
	import noData from '../../components/data/nodata.vue'
	export default {
		data() {
			return {
				lowerList:[],
				isLoad:false,
				isAll:false,
				page:1,
				limit:20,
				currentLevel:3
			}
		},
		onLoad:function(){
			this.getUserlist(true);
			this.getUseridentity();
		},
		methods: {
			//获取我的下级列表
			getUserlist:function(isSw){
				let that = this;
				if(that.isLoad || that.isAll){ //假如之前的请求未完成或者列表数据已经全部加载完毕，则返回空
					console.log("请求未完成或者列表数据已经全部加载完毕")
					return ;
				}
				that.isLoad = true;
				userlist({
					page:that.page,
					limit:that.limit
				}).then((res) => {
					if(res.code==0){
						if(isSw === true){//判断是否重新加载数据
							that.lowerList = res.data;
						}else{
							that.lowerList = that.lowerList.concat(res.data);
						}
						
						that.page += 1;
						that.isLoad = false;
						if(res.data.length < that.limit){
							that.isAll = true;
						}
					}else{
						that.isLoad = false;
						that.isAll = false;
					}
				});
			},
			//获取用户等级
			getUseridentity:function(){
				let that =this;
				useridentity().then((res) => {
					console.log(res)
					if(res.code==0){
						that.currentLevel = res.data.level;
					}else{
						alert(res.msg)
					}
				}).catch((e) => {
					console.log(e)
				})
			},
			aiddetail:function(aid){
				uni.navigateTo({
					url: '../lowerdetail/lowerdetail?aid='+aid
				});
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '../addlower/addlower'
			});
		},
		components:{
			noData
		}
	}
</script>
<style lang="scss" scoped>
	.mylower{
		height: 100%;
		.hideView{
			position: fixed;
			width: 88rpx;
			height: 60rpx;
			background-color: #FFFFFF;
			top: 0;
			right: 11px;
			z-index: 999;
		}
		.list_inc{
			height: 100%;
			.list{
				margin: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1rpx $uni-solid-color solid;
				.listLeft{
					display: flex;
					.listName{
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
					.listAid{
						font-size: $uni-font-size-sm;
						color: $uni-text-color-grey;
					}
					image{
						width: 81rpx;
						height: 81rpx;
						border-radius: 100%;
						margin-right: 30rpx;
					}
				}
				.listTag{
					font-size: $uni-font-size-sm;
					padding: 5rpx 10rpx;
					position: relative;
					color: #007AFF;
					&:before{
						content: '';
						position: absolute;
						border-radius: $uni-border-radius-sm;
						width: 92rpx;
						height: 40rpx;
						background-color: #007AFF;
						opacity:0.2;
						right: 0;
						top: 0;
					}
					&.listTag_dls{
						color: #FF8700;
						&:before{
							background-color: #FF8700;
						}
					}
				}
			}
		}	
	}
</style>
